<template>
    <div class="relations">
        <Header/>
        <div class="second_show">
            <div class="img"></div>
            <div class="pages_w1470" v-if="menudatalist">
                 <div class="second_show_text">
                     <div class="second-title">
                         <p class="en">{{menudata.alias}}</p>
                         <p class="cn">{{menudata.name}}</p>
                     </div>
                     <div class="text"></div>
                 </div>
             </div>
             <i class="tips"></i>
        </div>
        <div class="second_box" v-if="menudatalist">
            <img src="../assets/images/s5.png" class="relations-r">
            <img src="../assets/images/customized_hide.png" class="relations-l">
            <div class="pages_w1145 pa_70">
                 <div class="relations_title opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">{{menudatalist[0].name}}</div>
                 <div class="relations_text opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                     <div style="text-align: center;" v-html="menudatalist[0].content"></div>
                 </div>
                 <div class="relations_title opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">{{menudatalist[1].name}}</div>
                 <div class="relations_text opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                     <div style="text-align: center;" v-html="menudatalist[1].content"></div>
                 </div>

                 <div class="relations_title center opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">{{menudatalist[2].name}}</div>
                 <!--PC端显示-->
                 <div v-if='isMobile==0&&Object.keys(newslist).length>=1'>
                     <div class="swiper-relations opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                         <swiper :options="swiperScientificShow(newslist)" :auto-destroy="false">
                             <!--swiper-slide-->
                            <swiper-slide v-for="(item,index) in newslist" :key="index">
                                <a :href="$store.state.domain+item.atta" target="_blank">
                                    <span class="box scale"><img :src="$store.state.domain+item.pic"></span>
                                    <div class="txt">{{item.name}}</div>
                                    <div class="txt" style="margin-top: 3px; font-size: 18px;">{{item.intime|gdate('yyyy-MM-dd')}}</div>
                                </a>
                            </swiper-slide>
                         </swiper>
                         <div class="bottom"  v-if="newslist&&Object.keys(newslist).length>4">
                             <div class="a swiper-next"></div>
                             <div class="a swiper-prev"></div>
                             <div class="swiper-pagination"></div>
                         </div>
                         <div class="swiper_more"><img src="../assets/images/more.svg"></div>
                     </div>
                 </div>
                 <!--PC端显示 end-->

                 <!--移动端显示-->
                 <div v-if='isMobile==1'>
                    <ul class="ul relations_list fl-clr" data-web="relationslist">
                        <transition-group tag="div" name="gslide">
                            <li v-for="(item,index) in newslist" :key="index" v-show="Math.floor(index/4)<=gnodes">
                                <a :href="$store.state.domain+item.atta" target="_blank">
                                    <span class="box scale"><img :src="$store.state.domain+item.pic"></span>
                                    <div class="txt">{{item.name}}</div>
                                </a>
                            </li>
                        </transition-group>
                    </ul>
                    <a v-if="Object.keys(newslist).length>4" href="javascript:void(0);" @click="myclick" class="more_bnt"><span>展开更多</span></a>
                 </div>
                 <!--移动端显示 end-->
            </div>
        </div>

        <Footer/>

    </div>
</template>


<style lang="scss">
.relations .second_show .img {
    background-image: url(../assets/temp/bb8.jpg);
}
.gslide-enter-active, .gslide-leave-active {
  transition: opacity 1s;
}
.gslide-enter, .gslide-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>


<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'

export default {
    components: {
        Footer,Header
    },
    data () {
        return {
            gnodes: 0,
            newslist: {},
            isMobile:0, //pc:0 web:1
        }
    },
    computed: {

        menudata() {
            if(JSON.stringify(this.$store.getters.getmenudata(8)).length>100){
                return this.$store.getters.getmenudata(8)
            }else{
                return false
            }
        },
        menudatalist() {
            if(JSON.stringify(this.$store.getters.getmenudatalist(8)).length>100){
                return this.$store.getters.getmenudatalist(8)
            }else{
                return false
            }
        },
        menulistconfig() {
            return this.$store.getters.getmenuconfig
        }
    },
    methods: {
         infoWindowClose () {
             this.infoWindow.show = false
         },
         infoWindowOpen () {
             this.infoWindow.show = true
         },
         myclick: function(){
            var gpages = Math.ceil(Object.keys(this.newslist).length/4)-1;

            this.gnodes = this.gnodes+1;
            if(this.gnodes>=gpages){
                this.gnodes = gpages;
                $('.more_bnt').html('已加载完').addClass("no");
            }
        },
        swiperScientificShow(datas) {
            datas=datas??{};
            var gloops;
            if(Object.keys(datas).length>5){
                gloops = true;
            }else{
                gloops = false;
            }
            return {
                    slidesPerView:4,
                    spaceBetween:60,
                    slidesPerGroup:4,
                    loop: gloops,
                    pagination: {
                        el: '.swiper-relations .swiper-pagination',
                        clickable :true
                    },
                    navigation: {
                        nextEl: '.swiper-relations .swiper-prev',
                        prevEl: '.swiper-relations .swiper-next',
                    },
                    breakpoints:{
                        750:{
                            slidesPerView:4
                        },
                        320:{
                            slidesPerView:2,
                            spaceBetween:20,
                        }
                    }
            }
        }
    },
    mounted () {
        this.$axios
        .get(this.$store.state.domain+'/Multi/lists.json', {
            params: {
                id:16
            }
        })
        .then(response => {
            this.newslist = response.data.newslist;
        })
        .catch(error => {
            console.log(error);

        });
        $('.second_show .tips').fadeIn(1000)
        $('.second_show').addClass("show")
        if (isMobile()) {
          this.isMobile=1
        } else {
          this.isMobile=0
        }
        function isMobile() {
              let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
              return flag;
        }
    }
}
</script>
